<!-- SIDENAV HEADER -->
<div class="header" layout="column" layout-align="space-between start">

    <div class="logo" layout="row" layout-align="start center">
        <span class="logo-icon">
            <md-icon md-font-icon="icon-email" class="icon"></md-icon>
        </span>
        <span class="logo-text" translate="MAIL.MAILBOX">Mailbox</span>
    </div>

    <div class="account">
        <div class="title">John Doe</div>
        <md-select class="account-selection simplified" placeholder="Mail Selection"
                   ng-model="vm.selectedAccount">
            <md-option ng-repeat="(provider, address) in vm.accounts" value="{{provider}}">{{address}}
            </md-option>
        </md-select>
    </div>

</div>
<!-- / SIDENAV HEADER -->

<!-- SIDENAV CONTENT -->
<md-content ms-scroll class="content" flex>

    <div class="compose-button">
        <md-button class="md-accent md-raised" aria-label="compose"
                   ng-click="vm.composeDialog($event)" translate="MAIL.COMPOSE">COMPOSE
        </md-button>
    </div>

    <div class="navigation-simple" layout="column">
        <md-button class="item" aria-label="inbox">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-inbox" class="s16"></md-icon>
                <span class="title" translate="MAIL.INBOX">Inbox</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="starred">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-star" class="s16"></md-icon>
                <span class="title" flex translate="MAIL.STARRED">Starred</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="important">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-alert-circle" class="s16"></md-icon>
                <span class="title" flex translate="MAIL.IMPORTANT">Important</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="sent">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-send" class="s16"></md-icon>
                <span class="title" translate="MAIL.SENT">Sent</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="drafts">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-email-open" class="s16"></md-icon>
                <span class="title" translate="MAIL.DRAFTS">Drafts</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="all mail">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-folder" class="s16"></md-icon>
                <span class="title" translate="MAIL.ALL_MAIL">All Mail</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="spam">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-alert-octagon" class="s16"></md-icon>
                <span class="title" translate="MAIL.SPAM">Spam</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="trash">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-delete" class="s16"></md-icon>
                <span class="title" translate="MAIL.TRASH">Trash</span>
            </div>
        </md-button>

        <div class="item subheader" translate="MAIL.LABELS">Labels</div>

        <md-button class="item" aria-label="label notes">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-label" class="s16 green-fg"></md-icon>
                <span class="title">Notes</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="label paypal">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-label" class="s16 orange-fg"></md-icon>
                <span class="title">Paypal</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="label invoices">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-label" class="s16 blue-grey-fg"></md-icon>
                <span class="title">Invoices</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="label amazon">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-label" class="s16 blue-fg"></md-icon>
                <span class="title">Amazon</span>
            </div>
        </md-button>

        <md-divider></md-divider>

        <md-button class="item" aria-label="settings">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-cog" class="s16"></md-icon>
                <span class="title" translate="MAIL.SETTINGS">Settings</span>
            </div>
        </md-button>

        <md-button class="item" aria-label="help">
            <div layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-help" class="s16"></md-icon>
                <span class="title" translate="MAIL.HELP">Help</span>
            </div>
        </md-button>
    </div>

</md-content>
<!-- / SIDENAV CONTENT -->